<template>
    <div class="model-form">
        <el-page-header @back="goBack" content="增加产品">
        </el-page-header>
        <div class="model-content">
            <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
                <el-row :gutter="10">
                    <el-col :span="22">
                        <el-form-item label="名称">
                            <el-input v-model="form.name" name="name">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="图片" prop="logo">
                            <avatar v-model="form.logo"></avatar>
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="产品分类" prop="productCatalog">
                            <el-tree-select
                                v-model="form.productCatalog"
                                :data="productCatalogOptions"
                                check-strictly
                                :render-after-expand="false"
                            />
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="简单介绍" prop="introduce">
                            <el-input v-model="form.introduce" name="introduce">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="在线地址" prop="url">
                            <el-input v-model="form.url" name="url">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <el-form-item label="排序号" prop="sortNum">
                            <el-input-number v-model="form.sortNum" name="sortNum" :min="0" :max="9999999"
                                             style="width: 100%;"></el-input-number>
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <div style="margin-left: 160px;">
                            <sc-editor v-model="form.note" placeholder="请输入" style="width: 100%;"
                                       :height="400"></sc-editor>
                        </div>

                    </el-col>

                    <el-col :span="22">
                        <el-form-item>
                            <el-button @click="goBack">取消</el-button>
                            <el-button type="primary" @click="createData">确定</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {defineAsyncComponent} from "vue";

const scEditor = defineAsyncComponent(() => import('@/components/scEditor/index.vue'));
import avatar from "@/components/avatar.vue";
import {ref} from "vue";
import {useData} from "@/utils/useData";
import {useCreate} from "@/uses/useCreate";

const form = ref({
    name: null,
    logo: null,
    productCatalog: null,
    introduce: null,
    url: null,
    sortNum: null,
    note: null
})

const rules = ref({
    name: [
        {required: true, message: '请输入名称', trigger: 'blur'}
    ],
})

const ruleForm = ref(null);
const {listData: productCatalogOptions} = useData("/productCatalog/list", {
    depth: 1,
    fetch: 1,
    size: 500,
    sortMethod: "asc",
    sortField: "sortNum",
})
const {createData, goBack} = useCreate("product", form, ruleForm)

</script>

<style scoped>
</style>
